<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
      <el-row class="search-input">
     <el-form-item label="商品编码：">
      <el-input v-model="searchFilters.code" placeholder="请输入"></el-input>
     </el-form-item>
     <el-form-item label="商品名称：">
      <el-input v-model="searchFilters.chineseName" placeholder="请输入"></el-input>
     </el-form-item>
      <el-form-item label="开发显示平台：">
      <el-input v-model="searchFilters.chineseName" placeholder="请输入"></el-input>
     </el-form-item>
      <el-form-item label="商家：">
      <el-input v-model="searchFilters.chineseName" placeholder="请输入"></el-input>
     </el-form-item>
  </el-row>
      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button type="primary" size="small" @click="addForm()">新增</el-button>
        </el-button-group>
       </div>
      </div>
      <!--新增商品弹窗-->
      <el-dialog title="选择商品" :visible.sync="dialogTableVisible" width="60%">
        <div class="search-wrap">
          <el-form :inline="true" :model="searchFilters" ref="searchFilters" label-position="right" label-width="200px">
            <el-form-item label="商品编码">
              <el-input v-model="searchFilters.code" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="searchFilters.chineseName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商家编码">
              <el-input v-model="searchFilters.code" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商家名称">
              <el-input v-model="searchFilters.chineseName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品类目">
              <el-input v-model="searchFilters.artNo" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="零售价区间">
              <el-col :span="12">
                <el-input v-model="searchFilters.name" placeholder="请输入"></el-input>
              </el-col>
              <el-col :span="12">
                <el-input v-model="searchFilters.name" placeholder="请输入"></el-input>
              </el-col>
            </el-form-item>
            <el-button size="mini" @click="findPage">查询</el-button>
            <el-button size="mini" @click="resetForm">重置</el-button>
          </el-form>
        </div>
        <div class="table-wrap">
          <el-table :data="tableList" height="500px" @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection"></el-table-column>
            <el-table-column align="center" prop="code" label="商品编码"></el-table-column>
            <el-table-column align="center" prop="chineseName" label="商品名称"></el-table-column>
            <el-table-column align="center" prop="artNo" label="商品类目"></el-table-column>
            <el-table-column align="center" prop="type" label="商品类型" :formatter="leixin"></el-table-column>
            <el-table-column align="center" prop="typeOfProduct" label="商品形式" :formatter="xinshi"></el-table-column>
            <el-table-column align="center" prop="status" label="商家名称"></el-table-column>
            <el-table-column align="center" prop="name" label="零售价"></el-table-column>
            <el-table-column align="center" prop="name" label="平台服务费"></el-table-column>
            <el-table-column align="center" prop="availableStock" label="结算价"></el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination layout="total, prev, pager, next, jumper,sizes" @current-change="refreshPageRequest" @size-change="handleSizeChange" :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="totalSize" style="float:right;" :page-sizes="[10, 20, 30, 40]"></el-pagination>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="addOperateProduct">保 存</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=true
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=false
          :showIndex=false
          :groundings=true
          :showPushOperation=true
          @grounding="grounding"
          @handleLower="handleLower"
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
</el-form>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable'; 

//二.数据输出区
export default {

//===== 注册组件 =====
components: {
 jicTable,
},

//===== 数据初始化区=====
data() { return {

//===== 公共数据初始化 =====
pageIndex:0,//当前页数：首页；
pageSize:10,//每页记录数：10条记录；
totalSize:0,//总记录数：返回数据总条数
pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
tableList: [],                               // 表格列表数据
dialogTableVisible: false,
searchSize: 'mini',

//=====表格表头数据=====
tableHeaderList: [
{prop: "pic", label: "主图", minWidth: 100,formatter:null},
{prop: "chineseName", label: "商品名称", minWidth: 100,formatter:null},
{prop: "code", label: "商品编码", minWidth: 100,formatter:null},
{
  prop: "typeOfProduct",
  label: "商品形式",
  minWidth: 100,
  formatter: function (row, column, typeOfProduct, index) {
    if (typeOfProduct === 1){
      return "普通商品";
    }else if (typeOfProduct === 2){
      return "系列子品"
    }else if (typeOfProduct === 3){
      return "sku商品"
    }else {
      return "无"
    }
  }
},
{
  prop: "type",
  label: "商品类型",
  minWidth: 100,
  formatter: function (row, column, type, index) {
    if (type === 1) {
      return "常规商品";
    }else if (type === 2){
      return "卡券";
    }else if (type === 3){
      return "海购"
    }else if (type === 4){
      return "赠品"
    }else if (type === 5){
      return "生鲜产品"
    }else if (type === 6){
      return "增值服务"
    }else if (type === 7){
      return "其他"
    }else if (type === 10){
      return "实体卡"
    }else if (type === 11){
      return "虚拟卡"
    }else if (type === 20){
      return "券"
    } else if (type === 21){
      return "积分商品"
    }else if (type === 31){
      return "称重商品"
    }else{
      return "无"
    }
  }
},
{
  prop: "status",
  label: "审核状态",
  minWidth: 100,
  formatter: function (row, column, status, index) {
    if (status === 0) {
      return "待提交";
    }else if (status === 1){
      return "审核中";
    }else if (status === 2){
      return "审核通过"
    }else if (status === 3){
      return "审核不通过"
    }else if (status === 4){
      return "永久下架"
    }
  }
},
{prop: "status", label: "商家编码", minWidth: 100,formatter:null},
{prop: "status", label: "商家名称", minWidth: 100,formatter:null},
{
  prop: "canSale",
  label: "积分商城开启状态",
  minWidth: 100,
  formatter: function (row, column, canSale, index) {
    if (canSale == 0) {
      return "下架";
    }else if (canSale == 1){
      return "上架";
    }
  }},

],

//=====搜索表单对应的数据对象初始化=====
searchFilters: {
 id:null,
 code:null,
 productVolume:null,
 shelflifeDays:null,
 returnDays:null,
 thirdProductCode:null,
 englishName:null,
 typeOfProduct:null,
 parentId:null,
 grossWeight:null,
 subtitle:null,
 artNo:null,
 replacementDays:null,
 netWeight:null,
 netWeightStart:null,
 remark:null,
 productLength:null,
 freightTemplateId:null,
 productHeight:null,
 type:null,
 chineseName:null,
 sourceType:null,
 guaranteeDays:null,
 status:null,
 productWidth:null,
 channelCode:null,
 channelName:null,
 saleCalcUnitId:null,
 versionNo:null,
 auditMessage:null,
 categoryId:null,
 brandId:null,
 canSale:null,
 dataType:null,
 subTypeOfProduct:null,
 warehouseType:null,
 subtitleLan2:null,
 priceLevel:null,
 combineType:null,
 firstShelfTime:null,
 refId:null,
 placeOriginName:null,
 invoice:null,
 barCode:null,
 deptId:null,
 createTime:null,
 creator:null,
 updateTime:null,
 updater:null,
 deleteFlag:null,
 creatorName:null,
 updaterName:null,
 bomFlag:null,
 pillFlag:null,
 lifeCycle:null,
 inventoryDisplay:null,
 saleNum:null,
 parameterJson:null,
},
//dialogVisible: false, //// 是否显示弹窗内容;
//editDialogVisible1: false,//// 是否可编辑弹窗内容;
//editLoading: false,////是否显示加载时动画效果;
}
},

//===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
mounted() {
 this.findPage();
},

//=====Vue.js 方法区=====
methods: {

  leixin: function (row, column, type, index) {
    if (type === 1) {
      return "常规商品";
    }else if (type === 2){
      return "卡券";
    }else if (type === 3){
      return "海购"
    }else if (type === 4){
      return "赠品"
    }else if (type === 5){
      return "实体卡"
    }else if (type === 6){
      return "虚拟卡"
    }else if (type === 7){
      return "券"
    }else if (type === 8){
      return "生鲜产品"
    }else if (type === 9){
      return "增值服务"
    }else if (type === 10){
      return "其他"
    } else if (type === 11){
      return "积分商品"
    }else if (type === 12){
      return "称重商品"
    }else{
      return "无"
    }
  },
  xinshi: function (row, column, typeOfProduct, index) {
    if (typeOfProduct === 1){
      return "普通商品";
    }else if (typeOfProduct === 2){
      return "系列子品"
    }else if (typeOfProduct === 3){
      return "sku商品"
    }else {
      return "无"
    }
  },

//1.查询按钮：查询列表数据
findPage(pageNum) {
      // 传过滤器的参数
  let this_ = this;
  if (this_.searchFilters === undefined || this_.searchFilters === null) {
    this_.searchFilters = {};
  }
  
   this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
   this_.searchFilters.pageSize = this.pageRequest.pageSize;
   this.utils.request.findmPIntegralPage(this_.searchFilters, function (res) {
   if (res.code === "0000") {
     this_.tableList = res.data.list;
     this_.totalSize = Number(res.data.total);
   } else {
      this_.tableList = [];
      this_.totalSize = 0;
  }
  });
},
//下架
  handleLower(data) {

    this.utils.request.updateUp({id: data.row.id}, res => {
      if (res.data) {
        this.$message({message: '下架成功', type: 'success'});
        this.findPage();
      } else {
        this.$message({message: '下架失败', type: 'warning'});
      }
    });
  },
//上架
  grounding(data){

    this.utils.request.updateBelow({id: data.row.id}, res => {
      if (res.data) {
        this.$message({message: '上架成功', type: 'success'});
        this.findPage();
      } else {
        this.$message({message: '上架失败', type: 'warning'});
      }
    });
  },
// 2.重置按钮：无条件查询搜索框条件
resetForm(formName) {
 this.searchFilters = {
};
 this.findPage(null);
},

// 3.详情按钮对应的方法
handleDetail(params) {
 this.$router.push({path: "/MProductListDetail/" ,query:{id:params.row.id,disabled:true}});
},

// 4.编辑按钮对应的方法
handleEdit(params) {
  // debugger
 this.$router.push({path: "/BusinessProduct/",query:{id:params.row.id,disabled:false}});
},

// 5.跳转到新增记录页面；
/*addForm(params) {
params ={row:{ id:null }};
 this.$router.push({path: "/MProductListDetail/",query:{id:params.row.id,disabled:false}});
},*/
//打开新增仓库分配弹窗
  addForm() {
  let this_ = this;
  //判断是否保存单据
  this.dialogTableVisible = true;
  // this.findPage();
},
// 每页数据刷新
refreshPageRequest: function (pageNum) {
  this.pageRequest.pageNum = pageNum;
  this.findPage(this.pageRequest1);
},
// 6.每页记录数发生变化
handleSizeChange(params) {
 this.pageRequest.pageSize = params.size;
},

// 7.请求页数发生变化
handlePageChange(params) {
this.pageRequest.pageNum = params.number;
this.findPage();
},
// 8.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 9.关闭弹窗
handleClose() {
this.dialogVisible = false;
}
//==========Vue.js自定义方法区==========





},
}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
